<script>
import { identity } from '@/util/identity.js';

export default {
  name: "AdviceCard",
  components: {},
  props: {
    mainType: {
      type: String,
      default: "article",
    },
    item: {
      type: Object,
      default: {
        imgUrl: "",
        title: "建议标题",
        content: "建议简介",
        date: "2025/01/09",
      }
    },
    favored: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isFavored: this.favored,
      typeText: {
        article: "文章",
        video: "视频",
      },
      // 滑动相关状态
      startX: 0,
      currentX: 0,
      isSwipeOpen: false,
      swipeOffset: 0,
      maxSwipeOffset: 120, // 最大滑动距离
      swipeThreshold: 20, // 左划阈值，超过此距离才开始滑动
    };
  },
  computed: {
    iconUrl() {
      return this.isFavored ? "/static/icon/star-filled.svg" : "/static/icon/star.svg";
    },
    // 判断用户权限 - 使用 identity 系统
    isPrivileged() {
      return identity.isHealthTeam();
    },
    // 判断是否应该显示图片/视频
    shouldShowMedia() {
      if (this.mainType === 'video' || !this.item.imgUrl) {
        return false;
      }
      return true;
    },
  },
  methods: {
    toggleFavorite() {
      this.isFavored = !this.isFavored;
      this.$emit('toggle-favorite', this.item, this.isFavored);
    },
    
    // 编辑建议方法
    editAdvice() {
      this.$emit('edit', this.item);
      this.closeSwipe();
    },
    
    // 删除建议方法
    deleteAdvice() {
      if (!this.item.id) {
        console.error("建议 ID 不存在");
        return;
      }
      uni.showModal({
        title: "确认删除",
        content: "确定要删除该建议吗？",
        success: (res) => {
          if (res.confirm) {
            this.$request({
              url: "/article/delete/", // 修改接口路径
              method: "POST", // 修改请求类型为 POST
              data: {
                article_id: this.item.id, // 修改参数为 article_id
              },
              success: (response) => {
                if (response.statusCode === 200) {
                  uni.showToast({
                    title: "删除成功",
                    icon: "success",
                  });
                  this.$emit("delete", this.item.id); // 通知父组件更新列表
                } else {
                  uni.showToast({
                    title: "删除失败",
                    icon: "none",
                  });
                }
              },
              fail: (error) => {
                console.error("删除请求失败", error);
                uni.showToast({
                  title: "删除失败",
                  icon: "none",
                });
              },
            });
          }
        },
      });
      this.closeSwipe();
    },
    
    // 滑动相关方法
    onTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    
    onTouchMove(e) {
      if (!this.isPrivileged) return;
      
      this.currentX = e.touches[0].clientX;
      const deltaX = this.startX - this.currentX;
      
      if (deltaX > 0) { // 左滑
        if (deltaX > this.swipeThreshold) {
          // 超过阈值才开始滑动
          this.swipeOffset = Math.min(deltaX - this.swipeThreshold, this.maxSwipeOffset);
        } else {
          // 未超过阈值，不滑动
          this.swipeOffset = 0;
        }
      } else { // 右滑
        if (this.isSwipeOpen) {
          // 如果功能栏已经打开，从当前位置开始右滑
          this.swipeOffset = Math.max(this.maxSwipeOffset + deltaX, 1);
        } else {
          // 如果功能栏未打开，不允许右滑
          this.swipeOffset = 0;
        }
      }
    },
    
    onTouchEnd() {
      if (!this.isPrivileged) return;
      
      const openThreshold = this.maxSwipeOffset / 2;
      
      if (this.swipeOffset > openThreshold) {
        this.openSwipe();
      } else {
        this.closeSwipe();
      }
    },
    
    openSwipe() {
      this.swipeOffset = this.maxSwipeOffset;
      this.isSwipeOpen = true;
    },
    
    closeSwipe() {
      this.swipeOffset = 0;
      setTimeout(() => {
        this.isSwipeOpen = false;
      }, 300);
    },
  },
};
</script>

<template>
  <view class="swipe-container">
    <!-- 功能栏 -->
    <view v-if="isPrivileged && (swipeOffset > 0 || isSwipeOpen)" class="action-bar" :style="{ transform: `translateX(${120 - swipeOffset}rpx)` }">
      <view class="action-button edit-button" @tap.stop="editAdvice">
        <text class="action-icon">✏️</text>
        <text class="action-text">编辑</text>
      </view>
      <view class="action-button delete-button" @tap.stop="deleteAdvice">
        <text class="action-icon">🗑️</text>
        <text class="action-text">删除</text>
      </view>
    </view>
    
    <!-- 卡片内容 -->
    <view 
      class="flex-row items-end list-item"
      :style="{ transform: `translateX(-${swipeOffset}rpx)` }"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <view v-if="shouldShowMedia">
        <image class="shrink-0 image_8" :src="item.imgUrl" />
      </view>
      <view class="flex-col flex-1" :class="{ 'ml-18': shouldShowMedia }">
        <view class="flex-col items-start">
          <text class="font_2">{{ item.title }}</text>
          <text class="font_3 mt-10">{{ item.content }}</text>
        </view>
        <view class="flex-col items-start mt-36">
          <text class="font_4">{{ item.date }}</text>
          <view class="flex-col justify-start items-center text-wrapper_2 mt-4">
            <text class="font_5 text_5">{{ typeText[mainType] }}</text>
          </view>
        </view>
      </view>
      <image class="shrink-0 image_9 ml-18" :src="iconUrl" @click.stop="toggleFavorite" /> 
    </view>
  </view>
</template>

<style scoped lang="css">
/* 滑动容器 */
.swipe-container {
  position: relative;
  overflow: hidden;
  border-radius: 16rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

/* 卡片内容 */
.list-item {
  padding: 30rpx;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}

.list-item:first-child {
  margin-top: 0;
}

/* 功能栏 */
.action-bar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 120rpx;
  display: flex;
  flex-direction: column;
  z-index: 1;
  transition: transform 0.3s ease;
  border-radius: 0 16rpx 16rpx 0;
}

.action-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 24rpx;
  cursor: pointer;
}

.edit-button {
  background-color: #4CAF50;
  border-radius: 0;
}

.delete-button {
  background-color: #f44336;
  border-radius: 0;
}

.action-icon {
  font-size: 36rpx;
  margin-bottom: 8rpx;
}

.action-text {
  font-size: 20rpx;
  font-family: Microsoft YaHei UI;
}

/* 原有样式保持不变 */
.image_8 {
  border-radius: 16rpx;
  width: 200rpx;
  height: 200rpx;
}

.video_8 {
  border-radius: 16rpx;
  width: 200rpx;
  height: 200rpx;
}

.font_2 {
  font-size: 36rpx;
  font-family: Microsoft YaHei UI;
  line-height: 35.22rpx;
  font-weight: 700;
  color: #000000;
}

.font_3 {
  font-size: 24rpx;
  font-family: Microsoft YaHei UI;
  line-height: 23.4rpx;
  color: #000000;
}

.font_4 {
  font-size: 16rpx;
  font-family: Microsoft YaHei UI;
  line-height: 14.38rpx;
  color: #979797;
}

.text-wrapper_2 {
  padding: 4.76rpx 0 3.72rpx;
  background-color: rgba(244, 174, 130, 0.20);
  border-radius: 8rpx;
  width: 48rpx;
}

.font_5 {
  font-size: 16rpx;
  font-family: Microsoft YaHei UI;
  line-height: 14.38rpx;
  color: #ffffff;
}

.text_5 {
  line-height: 15.52rpx;
}

.image_9 {
  width: 48rpx;
  height: 48rpx;
}
</style>